<template>
    <div class="media">
        <img class="madia-bg" src="../../../assets/9.png" alt="">
         <div class="container">
            <div class="container-title">媒体报道</div>
            <div class="height70"></div>
            <div class="list-warpper">
                <div v-for="(item,index) in list" :key="item.id" class="item-warpper">
                    <div class="item-icon">{{item.time}}</div>
                    <div class="item-info">
                        <router-link  tag="div" :to="'/mediaReport/article/' + item.title" class="item-title" :class="index == 0? 'item-color':''">{{item.title}}</router-link>
                        <div class="item-desc">{{item.desc}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            list: [
                {
                    id: '001',
                    time: '2018.7.17',
                    title: '专业和规范 阿姨帮家庭保洁体验报告',
                    desc: '近日，互联网家庭服务O2O公司阿姨帮宣布在原有家电清洗的基础公司阿姨帮宣布在原有家电清洗的基础上又全新推出洗衣机清洗项目，这是阿姨帮继原有的五个家电清洗——空调，油烟机，冰箱，微波炉，电烤箱等项目上进行的又一次项目上新。'
                },{
                    id: '002',
                    time: '2018.6.17',
                    title: '颠覆传统搬家模式，阿姨帮日式搬家服务上线',
                    desc: '近日，互联网家庭服务O2O公司阿姨帮宣布在原有家电清洗的基础上又全新推出洗衣机清洗项目，这是阿姨帮继原有的五个家电清洗——空调，油烟机，冰箱，微波炉，电烤箱等项目上进行的又一次项目上新。'
                },{
                    id: '003',
                    time: '2018.5.17',
                    title: '专业和规范 阿姨帮家庭保洁体验报告',
                    desc: '近日，互联网家庭服务O2O公司阿姨帮宣布在原有家电清洗的基础上又全新推出洗衣机清洗项目，这是阿姨帮继原有的五个家电清洗——空调，油烟机，冰箱，微波炉，电烤箱等项目上进行的又一次项目上新。'
                },{
                    id: '004',
                    time: '2018.4.17',
                    title: '专业和规范 阿姨帮家庭保洁体验报告',
                    desc: '近日，互联网家庭服务O2O公司阿姨帮宣布在原有家电清洗的基础上又全新推出洗衣机清洗项目，这是阿姨帮继原有的五个家电清洗——空调，油烟机，冰箱，微波炉，电烤箱等项目上进行的又一次项目上新。'
                },
            ]
        }
    }
}
</script>

<style lang="stylus" scoped>
    .media
        position relative
        overflow hidden
        .madia-bg
            position absolute
            left -49px
            bottom -190px
            width 662px
            z-index -1
        .list-warpper
            .item-warpper
                display :flex
                margin-bottom 56px
                .item-icon
                    width 122px
                    height 52px
                    line-height 52px
                    text-align center
                    border-radius 10px
                    background-color #5287ff
                    font-size 14px
                    color #fff
                    margin-right 70px
                .item-info
                    flex 1
                    cursor pointer
                    .item-title
                        font-size 30px
                        letter-spacing 3px
                        margin-bottom 15px
                    .item-color
                        color #ffb852
                    .item-desc
                        color #a8a7a7     
                        line-height 26px
                        font-size 18px
                        letter-spacing 3px
                        overflow  hidden
                        text-overflow ellipsis
                        display -webkit-box
                        -webkit-line-clamp 2
                        -webkit-box-orient vertical
</style>

